<template>
  <div class="xshb-wrap">
    <div class="header-01"></div>
    <div class="header-02"></div>
    <div class="header-03"></div>

    <!--默认背景 -->
    <div class="hb-bg-default" v-if="lingquStatus == -1">
      <div class="loading">
        <img :src="require('../../assets/image/xshb/xshb-loading.gif')">
      </div>
    </div>
    <!--未领取-->
    <div class="hb" v-if="lingquStatus == 0">
      <div class="zhong">

      </div>
      <div class="qian">
        <div class="header"></div>
        <div class="body">
          <div class="quan"></div>
          <div class="btn-lilqlb" @click="lilqlb" ca="新手红包_新手红包$领取礼包"></div>
          <div class="dingwei">
            开启定位以获得城市专属礼包

          </div>
          <div class="shuoming" @click="showShuoming">
            <span>活动说明</span>
          </div>
        </div>
        <div class="footer"></div>
      </div>
    </div>
    <!--已领取-->
    <div class="hb2" v-if="lingquStatus == 1">
      <div class="zhong">
        你已领取过新手礼包

      </div>
      <div class="qian">
        <div class="header"></div>
        <div class="body">
          <div class="btn-qqbck" @click="qqbck" ca="新手红包_新手红包$去券包查看"></div>
        </div>
        <div class="footer"></div>
      </div>
    </div>
    <!--领取成功-->
    <div class="hb3" v-if="lingquStatus == 2">
      <div class="qian">
        <div class="header">
          你已成功领取以下礼包

        </div>
        <div class="body">
          <div class="quan-list">
            <div class="quan-item clearfix" v-for="quan in quanList">
              <div class="item-left">
                <span class="price"><em class="price-text">{{ quan.couponValue }}</em><em>元</em></span>
              </div>
              <div class="item-right">
                <div class="title">{{ quan.couponTemplateName }}</div>
                <div class="scope">{{ quan.couponRule }}</div>
              </div>
            </div>
          </div>
          <div class="btn-qqbck" @click="qqbck" ca="新手红包_新手红包$去券包查看"></div>
        </div>
        <div class="footer"></div>
      </div>
    </div>


    <div class="xshb-mask" v-if="isShowShuoming"></div>
    <div class="xshb-shuoming" v-if="isShowShuoming">
      <i class="shuoming-close" @click="hideShuoming"></i>
      <h4>活动说明</h4>
      <p>活动时间：即日起至2017年12月31日；</p>
      <p>活动对象：首次下载并注册登陆“车享家”APP的新用户；</p>
      <p>奖励发放方式：用户下载并登陆APP后，如满足发放条件，即可领取礼包；</p>
      <p>券说明：详细券规则可至我的-优惠券查看；	</p>
      <p>其他说明：</p>
      <p>1.领取红包前需要提前开启手机定位功能；</p>
      <p>2.同一用户（同一会员ID、同一设备、同一手机号，满足前述任一条件均视为同一用户）限领取一次；</p>
      <p>3.如发现同一用户多次领取该礼包，则视为作弊处理，车享家有权取消礼包发放；</p>
    </div>
  </div>
</template>

<script>
  import common from '../../assets/js/common';
  import Vue from 'vue';
  import {Toast, MessageBox} from 'mint-ui';
  export default{
    data (){
      return {
        isShowShuoming: false,
        //0未领取 1已领取 2领取成功 -1默认不显示
        lingquStatus: -1,
        quanList: []
      };
    },
    components: {},
    created (){
      if (!common.isApp) {
        Toast("请在App中打开！");
      }
      var _this = this;
      var backUrl = common.isdev() + "/user/checkLogin.htm";
      var hrefUrl = window.location.href;
      if (hrefUrl.indexOf("?userInfo=") > -1) {
        backUrl = backUrl + hrefUrl.substring(hrefUrl.indexOf("?userInfo="));
      }
      this.$http.post(backUrl, {}).then(function (res) {
        console.log("checkLogin:" + "成功");
      }, function (err) {
        console.log("checkLogin:" + "失败");
      }).then(function (res) {
        lb.getDeviceInfo(function (data) {
          if (data.errorCode == '0') {
            console.log("getDeviceInfo:" + "成功");
            console.log("data:" + data);
            var msg = data.msg;
            var deviceId = data.text.deviceId;
            var sysVersion = data.text.sysVersion;
            var resolution = data.text.resolution;
            var cxId = _this.getCookie("wemall_cxid_c");
            var paramObj = {
              cxId: cxId,
              equId: deviceId,
              sourceType: "6",
              activeCode: "SCLB",
              checkFlag: "3",
              ignoreSourceFlag: "1",
              ignoreActiveFlag: "1",
              andOrFlag: "1",
              partTimes: "1",
              intervalTime: "0"
            };
            console.log("paramObj:" + paramObj);
            _this.$http.post(common.isdev() + "/restful/checkActiveIsGot.htm", paramObj).then(function (res) {
              console.log("checkActiveIsGot:" + "成功");
              console.log("checkActiveIsGot:res:" + JSON.stringify(res));
              console.log("checkActiveIsGot:errcode:" + res.body.errcode);
              //新手红包未参加的情况下 判断是否参加过老带新活动
              if (res.body.errcode == 0 && res.body.errmsg == 0) {
                //this.lingquStatus =0;
                _this.$http.post(common.isdev() + "/guide/isGuideUser/0.htm", paramObj).then(function (res) {
                  console.log("isGuideUser:" + "成功");
                  console.log("isGuideUser:res:" + JSON.stringify(res));
                  console.log("isGuideUser:result:" + res.body.result);
                  //result 1未参加 0 已参加
                  if (res.body.result == 1) {
                    _this.lingquStatus = 0;
                  } else {
                    _this.lingquStatus = 1;
                  }
                  //打点
                  common.ANA_AnalyticsScan();
                }, function (err) {
                  console.log("checkActiveIsGot:" + "失败");
                  Toast("系统繁忙，请稍后再试");
                });
              } else {
                this.lingquStatus = 1;
                //打点
                common.ANA_AnalyticsScan();
              }

            }, function (err) {
              console.log("checkActiveIsGot:" + "失败");
              Toast("系统繁忙，请稍后再试");
            });
            console.log("checkActiveIsGot:" + "结束");
          } else {
            console.log("getDeviceInfo:" + "失败");
          }
        });
      }, function (err) {

      });

    },
    methods: {
      //显示活动说明
      showShuoming () {
        this.isShowShuoming = true;
      },
      //隐藏活动说明
      hideShuoming () {
        this.isShowShuoming = false;
      },
      lilqlb () {
        //立即领取礼包
        var _this = this;
        lb.geolocation(function (data) {
          if (data.errorCode == 0) {
            var longitude = data.text.longitude ? data.text.longitude : "";
            var latitude = data.text.latitude ? data.text.latitude : "";
            var city = data.text.cityName ? data.text.cityName : "";
            /*
             _this.setCookie("wemall_locationlongitude_c",longitude);
             _this.setCookie("wemall_locationlatitude_c",latitude);
             _this.setCookie("cityName",city);
             console.log("wemall_locationlongitude_c:"+_this.getCookie("wemall_locationlongitude_c"));
             console.log("wemall_locationlatitude_c:"+_this.getCookie("wemall_locationlatitude_c"));
             console.log("cityName:"+_this.getCookie("cityName"));
             */
            var paramObj = {
              "longitude": longitude,
              "latitude": latitude,
              "cityName": city
            };
            _this.$http.post(common.isdev() + "/sclb/ajax/receive.htm", paramObj).then(function (res) {
              console.log("receive:" + "成功");
              console.log("receive:res:" + JSON.stringify(res));
              console.log("receive:result:" + res.body.result);
              if (res.body.result == 1) {
                this.quanList = res.body.data;
                console.log("receive:data:" + res.data);
                this.lingquStatus = 2;
              } else {
                this.lingquStatus = 0;
              }
              //打点
              common.ANA_AnalyticsScan();
            }, function (err) {
              console.log("receive:" + "失败");
              Toast("系统繁忙，请稍后在试");
            });
          } else if (data.errorCode == -1) {
            //Toast("抱歉，定位失败。如未开启定位请在设置中开启定位");
          }
        })
      },
      qqbck (){
        //去券包查看
        var cxjappHost = "";
        var host = window.location.host;
        if (host.indexOf("sit") > -1) {
          cxjappHost = "//cxjapp.chexiangsit.com";
        } else if (host.indexOf("pre") > -1) {
          cxjappHost = "//cxjapp.chexiangpre.com";
        } else {
          cxjappHost = "//cxjapp.chexiang.com";
        }
        console.log("去券包查看");
        window.location.href = cxjappHost + "/service/usercoupon/getUserCouponList/1?couponType=1&userId=";
      },
      getUrlParam (url){
        var arr = [], temp = {}, _url = '';
        if (url && url != 'undefined' && url != 'null') {
          // 是否存在 '?'
          _url = url.indexOf('?') > -1 ? url.substr(1) : url;
          arr = _url.split('&');
          for (var i = 0; i < arr.length; i++) {
            temp[arr[i].split('=')[0]] = arr[i].split('=')[1];
          }
        }
        return temp;
      },
      getCookie (name){
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)) {
          return unescape(arr[2]);
        } else {
          return null;
        }
      },
      setCookie (name, value){
        var exp = new Date();
        exp.setTime(exp.getTime() + 5 * 60 * 1000); //过期时间5分钟
        document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString();
      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/css/reset.scss";
  @import "../../assets/css/common.scss";

  html, body {
    height: 100%;
  }

  .xshb-wrap {
    height: 100%;
    position: relative;
    background: #931718 url("../../assets/image/xshb/xshb-bg.jpg") center top no-repeat;
    background-size: 100% auto;
    .header-01 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 20;
      width: 100%;
      height: 20rem;
      background: transparent url("../../assets/image/xshb/xshb-header-02.png") center center no-repeat;
      background-size: 100% 20rem;
    }
    .header-02 {
      position: absolute;
      top: 38rem;
      left: 0;
      z-index: 21;
      width: 3.75rem;
      height: 7.85rem;
      background: transparent url("../../assets/image/xshb/xshb-header-03.png") center center no-repeat;
      background-size: 3.75rem 7.85rem;
    }
    .header-03 {
      position: absolute;
      top: 26rem;
      right: 0;
      z-index: 22;
      width: 6.25rem;
      height: 22.9rem;
      background: transparent url("../../assets/image/xshb/xshb-header-04.png") center center no-repeat;
      background-size: 6.25rem 22.9rem;
    }
    @-webkit-keyframes hb-enter {
      0% {
        -webkit-transform: scale(0.8, 0.8) translate(0, -30%);
        opacity: 0;
      }
      100% {
        -webkit-transform: scale(1, 1) translate(0, 0);
        opacity: 1;
      }
    }
    @keyframes hb-enter {
      0% {
        transform: scale(0.8, 0.8) translate(0, -30%);
        opacity: 0;
      }
      100% {
        transform: scale(1, 1) translate(0, 0);
        opacity: 1;
      }
    }
    @-webkit-keyframes hb-zhong-enter {
      0% {
        -webkit-transform: scale(1, 1);
      }
      50% {
        -webkit-transform: scale(0.5, 0.5);
      }
      100% {
        -webkit-transform: scale(1, 1);
      }
    }
    @keyframes hb-zhong-enter {
      0% {
        transform: scale(1, 1);
      }
      50% {
        transform: scale(0.5, 0.5);
      }
      100% {
        transform: scale(1, 1);
      }
    }
    .hb-bg-default {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 9;
      width: 14rem;
      height: 21.2rem;
      margin-left: -7rem;
      margin-top: -10.6rem;
      background: transparent url("../../assets/image/xshb/xshb-hb-bg-default.png") center center no-repeat;
      background-size: 14rem 21.2rem;
      .loading {
        margin: 12.5rem auto 0;
        width: 7rem;
        height: 7rem;
        img {
          width: 7rem;
          height: 7rem;
        }
      }
    }

    .hb {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -26rem;
      margin-left: -17rem;
      z-index: 10;
      width: 34rem;
      height: 52rem;
      background: transparent url("../../assets/image/xshb/xshb-hb-hou.png") center center no-repeat;
      background-size: 34rem 52rem;
      border-radius: 1rem;
      overflow: hidden;
      -webkit-animation: hb-enter 1s ease 0s 1 forwards;
      animation: hb-enter 1s ease 0s 1 forwards;
      .zhong {
        position: absolute;
        left: 50%;
        bottom: 26rem;
        z-index: 11;
        margin-left: -7rem;
        width: 18rem;
        height: 14.5rem;
        background: transparent url("../../assets/image/xshb/xshb-hb-zhong-01.png") center center no-repeat;
        background-size: 18rem 14.5rem;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        -webkit-animation: hb-zhong-enter 1s ease 1s 1 forwards;
        animation: hb-zhong-enter 1s ease 1s 1 forwards;
      }
      .qian {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 19;
        width: 34rem;
        height: 37.1rem;
        .header {
          position: absolute;
          top: 0.1rem;
          left: 0;
          width: 100%;
          height: 8.5rem;
          background: transparent url("../../assets/image/xshb/xshb-hb-qian-h.png") center center no-repeat;
          background-size: 34rem 8.5rem;
        }
        .body {
          position: absolute;
          top: 8.5rem;
          left: 0;
          width: 100%;
          height: 27.2rem;
          background: url("../../assets/image/xshb/xshb-hb-qian-b-bg.png") center center repeat-y;
          padding-top: 1.5rem;
          .quan {
            width: 30.15rem;
            height: 7.75rem;
            margin: 0 auto;
            background: url("../../assets/image/xshb/xshb-hb-qian-b-quan.png") center center repeat-y;
            background-size: 30.15rem 7.75rem;
          }
          .btn-lilqlb {
            width: 25.5rem;
            height: 5.2rem;
            margin-top: 2rem;
            margin-left: 4.25rem;
            background: transparent url("../../assets/image/xshb/xshb-btn-lilqlb.png") center top no-repeat;
            background-size: 25.5rem 5.2rem;
          }
          .dingwei {
            width: 23rem;
            height: 2.5rem;
            line-height: 2.5rem;
            margin: 0 auto;
            padding-left: 2rem;
            background: transparent url("../../assets/image/xshb/xshb-btn-location.png") center left no-repeat;
            background-size: 1.5rem 2rem;
            color: #fefefe;
            font-size: 1.5rem;
            text-align: left;
          }
          .shuoming {
            margin-top: 2.5rem;
            text-align: center;
            font-size: 1.5rem;
            color: #fcea29;
            text-decoration: underline;
          }
        }
        .footer {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1.6rem;
          background: transparent url("../../assets/image/xshb/xshb-hb-qian-b-bg.png") center center no-repeat;
          background-size: 34rem 1.5rem;
        }
      }
    }
    .hb2 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -26rem;
      margin-left: -17rem;
      z-index: 10;
      width: 34rem;
      height: 52rem;
      background: transparent url("../../assets/image/xshb/xshb-hb-hou.png") center center no-repeat;
      background-size: 34rem 52rem;
      border-radius: 1rem;
      overflow: hidden;
      -webkit-animation: hb-enter 1s ease 0s 1 forwards;
      animation: hb-enter 1s ease 0s 1 forwards;
      .zhong {
        position: absolute;
        left: 50%;
        bottom: 8rem;
        z-index: 11;
        margin-left: -14.25rem;
        width: 28.5rem;
        height: 31rem;
        padding-top: 13.5rem;
        border-radius: 0.5rem;
        background: #f7f6f6 url("../../assets/image/xshb/xshb-hb-zhong-03.png") center 3rem no-repeat;
        background-size: 9.85rem 9.35rem;
        font-size: 2rem;
        color: #5e5e5e;
        text-align: center;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        -webkit-animation: hb-zhong-enter 1s ease 1s 1 forwards;
        animation: hb-zhong-enter 1s ease 1s 1 forwards;
      }
      .qian {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 19;
        width: 34rem;
        height: 26rem;
        .header {
          position: absolute;
          top: 0.1rem;
          left: 0;
          width: 100%;
          height: 8.5rem;
          background: transparent url("../../assets/image/xshb/xshb-hb-qian-h.png") center center no-repeat;
          background-size: 34rem 8.5rem;
        }
        .body {
          position: absolute;
          top: 8.5rem;
          left: 0;
          width: 100%;
          height: 16.1rem;
          background: url("../../assets/image/xshb/xshb-hb-qian-b-bg.png") center center repeat-y;
          .btn-qqbck {
            width: 18rem;
            height: 4rem;
            margin-top: 4.5rem;
            margin-left: 8.25rem;
            background: transparent url("../../assets/image/xshb/xshb-btn-qqbck.png") center top no-repeat;
            background-size: 18rem 4rem;
          }
        }
        .footer {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1.6rem;
          background: transparent url("../../assets/image/xshb/xshb-hb-qian-b-bg.png") center center no-repeat;
          background-size: 34rem 1.5rem;
        }
      }
    }
    .hb3 {
      position: absolute;
      top: 60%;
      left: 50%;
      margin-top: -26rem;
      margin-left: -17rem;
      z-index: 10;
      width: 34rem;
      height: 52rem;
      background: transparent url("../../assets/image/xshb/xshb-hb-hou.png") center center no-repeat;
      background-size: 34rem 52rem;
      border-radius: 1rem;
      overflow: hidden;
      -webkit-animation: hb-enter 1s ease 0s 1 forwards;
      animation: hb-enter 1s ease 0s 1 forwards;
      .qian {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 19;
        width: 34rem;
        height: 45rem;
        .header {
          position: absolute;
          top: 3.2rem;
          left: 0;
          /*padding-top: 3.2rem;*/
          width: 100%;
          height: 4.3rem;
          line-height: 4.3rem;
          box-sizing: content-box;
          background: #ff4546;
          text-align: center;
          color: #ffffff;
          font-size: 1.5rem;
        }
        .body {
          position: absolute;
          top: 7.5rem;
          left: 0;
          width: 100%;
          height: 36.1rem;
          background: url("../../assets/image/xshb/xshb-hb-qian-b-bg.png") center center repeat-y;
          .quan-list {
            max-height: 30.5rem;
            overflow: auto;
            .quan-item {
              position: relative;
              left: 50%;
              margin-left: -14.85rem;
              margin-bottom: 0.5rem;
              width: 29.7rem;
              height: 8.5rem;
              background: transparent url("../../assets/image/xshb/xshb-quan-bg.png") center top no-repeat;
              background-size: 100% 100%;
              .item-left {
                float: left;
                width: 11rem;
                height: 8.5rem;
                line-height: 8.5rem;
                text-align: center;
                .price {
                  color: #f3536b;
                  .price-text {
                    font-size: 3rem;
                  }
                  .price-danwei {
                    font-size: 1.9rem;
                  }
                }
              }
              .item-right {
                padding-right: 1rem;
                float: left;
                width: 18.7rem;
                height: 8.5rem;
                text-align: left;
                .title {
                  padding-top: 1.2rem;
                  font-size: 1.5rem;
                  line-height: 1;
                  color: #243742;
                  height: 3.5rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .scope {
                  padding-top: .5rem;
                  padding-bottom: .5rem;
                  font-size: 1.1rem;
                  line-height: 1.65rem;
                  color: #a2adb8;
                  height: 3.8rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 3;
                  -webkit-box-orient: vertical;
                }
              }
            }
          }
          .btn-qqbck {
            width: 18rem;
            height: 4rem;
            margin-top: 1.8rem;
            margin-left: 8.25rem;
            background: transparent url("../../assets/image/xshb/xshb-btn-qqbck.png") center top no-repeat;
            background-size: 18rem 4rem;
          }
        }
        .footer {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1.6rem;
          background: transparent url("../../assets/image/xshb/xshb-hb-qian-b-bg.png") center center no-repeat;
          background-size: 34rem 1.5rem;
        }
      }
    }
    .xshb-mask {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 30;
      width: 100%;
      height: 100%;
      background-color: rgba(60, 60, 60, 0.85);
    }
    .xshb-shuoming {
      position: absolute;
      top: 7rem;
      padding: 0 6.5rem;
      height: 3rem;
      z-index: 100;
      text-align: center;
      color: #ffffff;
      h4 {
        font-weight: 800;
        font-size: 1.8rem;
        line-height: 3rem;
        margin-bottom: 1rem;
      }
      p {
        text-align: left;
        font-size: 1.2rem;
        line-height: 2rem;
      }
      .shuoming-close {
        position: absolute;
        right: 4rem;
        top: -4rem;
        width: 3.25rem;
        height: 3.25rem;
        background: transparent url("../../assets/image/xshb/xshb-btn-close.png") center top no-repeat;
        background-size: 3.25rem 3.25rem;
      }
    }
  }

</style>
